<template>
  <el-table v-if="tableData" :data="tableData" class="body" @cell-mouse-enter="handleCellMouseEnter" @cell-mouse-leave="handleCellMouseLeave">
    <el-table-column label="ID" width="100">
      <template #default="scope">
        <div v-if="hoveredRowIndex== scope.row.id" style="display: flex; align-items: center">
          <el-icon size="24" @click="playSong(scope.row.id)" ><i-bi-skip-end-circle/></el-icon>
        </div>
        <span v-else>
            {{ scope.row.id }}
          </span>
      </template>
    </el-table-column>
    <el-table-column prop="picUrl" label="专辑名称">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-avatar :src="scope.row.blurPicUrl" shape="square" fit="fill" />
          <div style="margin-left: 10px; display: flex; flex-direction: column;">
            <span>{{ scope.row.name }} </span>
            <span style="white-space: nowrap;overflow: hidden;">
              <span v-for="(singer, index) in scope.row.artists" :key="singer.id" @click.stop="toTSinger(singer.id)">
                {{ singer.name }}
                <span v-if="index < scope.row.artists.length - 1"> / </span>
              </span>
            </span>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="publishTime" label="发布时间" width="150" align="center"/>
  </el-table>
</template>
<script setup lang="ts">
import { ref } from "vue";
//import {usePlayStore} from '@/store/PlayStore'

defineProps(['tableData'])
//const lpaystore = usePlayStore()
let hoveredRowIndex =ref()
function playSong(id:string) {
  console.log("查询专辑内歌曲",id)
  //查询专辑歌曲列表
  // lpaystore.selectPlay([row])
}
function handleCellMouseEnter(row:any) {
  hoveredRowIndex.value = row.id;
}
function handleCellMouseLeave(){
  hoveredRowIndex.value = null
}
function toTSinger(id){
  console.log("查询歌手",id)
}
</script>
<style scoped lang="scss">
.body{
  width: 100%;

}
:deep(.el-table__inner-wrapper) {
  --el-table-tr-bg-color: transparentize;
  --el-table-header-bg-color: transparentize;
  tr.el-table__row{
    border-radius: 10px;
    cursor: pointer;
  }
}

</style>
